
// highlight.js  代码高亮指令
import Hljs from 'highlight.js';
import 'highlight.js/styles/a11y-dark.css' //

let Highlight = {};
Highlight.install = function (Vue, options) {
    // 先有数据再绑定，调用hcode
    Vue.directive('hcode', {
        bind: function (el, binding, vnode) {
            // bind中的vnode里面的key可以给设置一个随机数，这样每次都会更新虚拟节点。
            let num = parseInt(Math.random() * 10)
            vnode.key = num
        },
        inserted: function (el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i];
                Hljs.highlightBlock(item);
            };
        }
    });

    // 先绑定，后面会有数据更新，调用code
    Vue.directive('code', {
        bind: function (el, binding, vnode) {
            // bind中的vnode里面的key可以给设置一个随机数，这样每次都会更新虚拟节点。
            let num = parseInt(Math.random() * 10)
            vnode.key = num
        },
        componentUpdated: function (el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i];
                Hljs.highlightBlock(item);
            };
        }
    });
};

export default Highlight;